<!--#include virtual="/include/header.html"-->

<!-- 内容部分 s-->
<div id="bd" class="start">
	
	<div class="step">
		<ul>
			<li class="cur"><b>1.</b>想去哪里？</li>
			<li><b>2.</b>什么时候去？</li>
			<li><b>3.</b>跟谁一起？</li>
		</ul>
	</div>
	<div class="radius sel-destination">
		<ul class="img-list" id="goWhere">
			<li data="1"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟1</span><i></i></li>
			<li data="2"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟2</span><i></i></li>
			<li data="3"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟3</span><i></i></li>
			<li data="4"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟4</span><i></i></li>
			<li data="5"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟5</span><i></i></li>
			<li data="6"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟6</span><i></i></li>
			<li data="7"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟7</span><i></i></li>
			<li data="8"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟8</span><i></i></li>
			<li data="9"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟9</span><i></i></li>
			<li data="10"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟10</span><i></i></li>
			<li data="11"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟11</span><i></i></li>
			<li data="12"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟12</span><i></i></li>
			<li data="13"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟13</span><i></i></li>
			<li data="14"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟14</span><i></i></li>
			<li data="15"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟15</span><i></i></li>
			<li data="16"><img src="/static/img/data/40x40.jpg" alt="" /><span class="name">天堂鸟16</span><i></i></li>
		</ul>
		<div class="entry-destination">
			<input type="hidden" name="" id="hValue" />
			<input type="text" name="" id="sTxt" value="没有想去的地方？在这里输入..." />
			<button class="obtn">下一步</button>
		</div>
	</div>
</div>
<!-- 内容部分 end-->



<script type="text/javascript" src="/static/script/core/jquery.js"></script>
<script type="text/javascript" src="/static/script/widget/jquery.autocomplete.js"></script>
<script>
	(function(){
		var hValue = $('#hValue'),
			selected = $('#sTxt'),
			sStyle = 'seled',
			cur = null;

		$('#goWhere').on('click', 'li', function(){
			var o = $(this);
			if(cur !== null && cur !== o){
				cur.removeClass(sStyle);
			}
			cur = o.addClass(sStyle);
			hValue.val(o.attr('data'));
			selected.val(o.find('span').html());
		});

		function selectItem(li){
			if( li == null ) return alert("No match!");

			var sValue = null;
			if( !!li.extra ){
				sValue = li.extra[0];
			}else{
				sValue = li.selectValue;
			}
			hValue.val(sValue);
			cur = $('#goWhere li[data='+sValue+']').addClass(sStyle);
		}

		selected.on('keyup', function(){
			if(cur !== null){
				cur.removeClass(sStyle);
				hValue.val('');
			}
		});

		selected.autocomplete("/api.php", {
			delay:10,//延时(毫秒)
			minChars:1,//从第几个字符时开始提示
			matchSubset:1,
			matchContains:1,
			cacheLength:10,
			maxItemsToShow: 10,//最多显示10个
			extraParams:{type:2},//请求URL时如果有带其他参数时按这里的格式写
			onItemSelect:selectItem,
			//onFindValue:findValue,
			//formatItem:formatItem,
			autoFill:true
		});
	})();
</script>
<!--#include virtual="/include/footer.html"-->
